<template>
  <div>
    <store-back-nav backTitle="剥壳者商铺"></store-back-nav>
    <div class="sectionsss">
      <div class="store">
        <!-- <div class="storeHeader"> -->
        <van-row>
          <van-col span="3">
            <div class="storeImg">
              <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" /></div
          ></van-col>
          <van-col span="16 ">
            <div>店铺名</div>
            <van-rate v-model="value" :size="18" readonly/><span style="margin-left:10px">好评率100%</span></van-col
          >
          <van-col span="5">
            <van-button plain hairline type="primary" size="small"
              >+关注</van-button
            ></van-col
          >
        </van-row>
        <!-- </div> -->
        <div class="storeDesc">
          <span>今日销量:999</span>
          <span>累计销量:999</span>
          <span>今日销量:999</span>
        </div>
      </div>
      <!-- 轮播 -->
      <van-swipe :autoplay="3000" height="200" indicator-color="#4bd863">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="banner" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- tab标签 -->
      <van-sticky :offset-top="50">
        <van-tabs v-model="active" swipeable color="#4bd863" @click="onClick">
          <van-tab v-for="(item, index) in title" :title="item" :key="index">
            <!-- <router-view></router-view> -->
          </van-tab>
        </van-tabs>
      </van-sticky>

      <div class="product-list">
        <!-- 动态内容 -->
        <div class="product-item" v-for="item in storeProduct" :key="item.id">
          <div class="item-img"><img :src="item.img" alt="" /></div>
          <div class="item-text">
            <p>黑美人西瓜鲜美多汁2个起卖</p>
            <p>
              <span>
                <span style="color: red; margin-right: 5px"
                  >￥{{ item.price }}</span
                >
                起/个</span
              >
              <span style="color: #9fa19f;margin-left:20px">销量:{{ item.sales }}</span>
            </p>
            <div>
              <van-rate
                v-model="value"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                allow-half
                readonly
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import StoreBackNav from "../../components/nav/Backnav";
export default {
  components: { StoreBackNav },
  data() {
    return {
      active: "0",
      value: 3,
      title: ["春季水果", "夏季水果", "秋季水果", "冬季水果"],
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      storeProduct: [
        {
          id: "1",
          desc: "黑美人西瓜鲜美多汁2个起卖",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210806%2F9c6a06aa8bac445997de72007be0cd03.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644386535&t=a16a6423c1aa7f5141b74acdb638ea56",
          price: "3333",
          sales: 9999,
        },
        {
          id: "2",
          desc: "黑美人西瓜鲜美多汁2个起卖",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210806%2F9c6a06aa8bac445997de72007be0cd03.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644386535&t=a16a6423c1aa7f5141b74acdb638ea56",
          price: "3333",
          sales: 9999,
        },
        {
          id: "3",
          desc: "黑美人西瓜鲜美多汁2个起卖",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210806%2F9c6a06aa8bac445997de72007be0cd03.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644386535&t=a16a6423c1aa7f5141b74acdb638ea56",
          price: "3333",
          sales: 9999,
        },
        {
          id: "4",
          desc: "黑美人西瓜鲜美多汁2个起卖",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210806%2F9c6a06aa8bac445997de72007be0cd03.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644386535&t=a16a6423c1aa7f5141b74acdb638ea56",
          price: "3333",
          sales: 9999,
        },
        {
          id: "5",
          desc: "黑美人西瓜鲜美多汁2个起卖",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210806%2F9c6a06aa8bac445997de72007be0cd03.png&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644386535&t=a16a6423c1aa7f5141b74acdb638ea56",
          price: "3333",
          sales: 9999,
        },
      ],
    };
  },
  methods: {
    onClick(name, title) {
      console.log(name, title);
    },
  },
};
</script>

<style lang="less" scoped>
.store {
  padding: 10px;
  .storeHeader {
    display: flex;
    align-items: center;
  }
  .storeImg {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    img {
      width: 100%;
    }
  }
  .storeDesc {
    color: gray;
    font-size: 12.5008px;
    margin-top: 5px;
    span {
      margin-right: 20px;
    }
  }
}
.banner {
  height: 100%;
  width: 100%;
}
/* 商品 */
.product-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 13px;
  .product-item {
    background-color: rgba(226, 222, 222, 0.685);
    width: 48%;
    height: 70%;
    margin: 5px 1%;
    border-radius: 6px;
    padding: 0 0 10px 0;
    background-color: #fff;
    border: .5008px solid rgba(224, 224, 224, 0.692);
    box-sizing: border-box;
    .item-img {
      height: 100%;
      img {
        border-radius: 6px 6px 0 0;
        width: 100%;
      }
    }
    .item-text{
      padding: 0 5px;
    }
  }
}
</style>